<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><b>首页</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin:40px 20px 20px 20px">
    <el-button type="primary" @click="dialogSingState=true">查看活动</el-button>
  </div>
  <!-- 卡片容器 -->
  <div style="display: flex; justify-content: space-between; margin: 40px 20px 20px 20px">
    <!-- 第一个卡片，占五分之三 -->
    <el-card style="flex: 3; margin-right: 20px;">
      <div id="chart" style="width: 600px;height:400px;"></div>
    </el-card>
    <!-- 第二个卡片，占五分之二 -->
    <el-card style="flex: 2;">
      <h3>未到成员</h3>
      <div style="margin:40px 20px 20px 20px">
        <el-table :data="unRiveStudent" stripe border style="width: 100%">
          <el-table-column prop="sname" label="姓名"  align="center"/>
          <el-table-column prop="sid" label="学号" width="120px" align="center"/>
          <el-table-column prop="dept" label="年级" align="center"/>
          <el-table-column prop="phone" label="联系电话" align="center"/>
        </el-table>
      </div>
    </el-card>
  </div>

  <!-- 数据表格 -->
  <div style="margin:40px 20px 20px 20px">
    <el-table :data="tableCourse" stripe border style="width: 100%">
      <el-table-column prop="title" label="活动名称"  align="center"/>
      <el-table-column prop="signtime" label="日期"  align="center"/>
      <el-table-column prop="shouldarrive" label="应签到" align="center"/>
      <el-table-column prop="truearrive" label="实际签到" align="center"/>
    </el-table>
  </div>

  <!-- 查看活动  签到-->
  <el-dialog v-model="dialogSingState" title="活动签到" width="700">
    <div>
      <el-form ref="formAddRef" :model="formNotice" label-width="120px">
        <el-form-item prop="id" label="活动">
          <el-select v-model="formNotice.id">
            <el-option label="请选择" value=""></el-option>
            <el-option
                v-for="item in noticeType"
                :key="item.id"
                :label="item.title"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogSignOnReset">取消</el-button>
        <el-button type="primary"  @click="getAllMsg" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, computed, reactive} from 'vue';
import request from "@/utils/amusement"
import { ElBreadcrumb, ElBreadcrumbItem, ElTable, ElTableColumn,
  ElCard ,ElProgress} from 'element-plus';
import * as echarts from 'echarts';

const dialogSingState = ref(false)
const formNoticeData = {
  title : '' ,
  id : '' ,
}
// 新增表单绑定数据模型
const formNotice = reactive({...formNoticeData})

const noticeType = ref([])

//等下写下拉框
const getnoticeType = () => {
  console.log("来到了，getnoticetype:")
  let type =  JSON.parse(sessionStorage.getItem('loginUser')).teamid;
  const typeEntity = {
    type: type,
  };
  request({
    url:'/sign2/notice2',
    method:'get',
    params:typeEntity,
  }).then(req=>{
    if (200 == req.data.errorCode){
      noticeType.value=req.data.data
    }
    console.log("noticetype:"+noticeType+"有没有取到值")
  })
};

const dialogSignOnReset = () => {
  // 清空表单数据
  Object.assign(formNotice , formNoticeData)
  // 关闭对话框
  dialogSingState.value = false
}
/////////////  ECharts1  //////////////
// 准备ECharts的数据
const prepareChartData = (courses) => {
  let categories = []; // 活动名
  let data = []; // 签到率

  courses.forEach(course => {
    categories.push(course.title);
    // 签到率 = 实际签到次数 / 应签到次数
    const attendanceRate = course.truearrive / course.shouldarrive;
    data.push((attendanceRate * 100).toFixed(2)); // 转换为百分比并保留两位小数
  });

  return { categories, data };
};

// 绘制ECharts图表
const drawChart = (chartData) => {
  const myChart = echarts.init(document.getElementById('chart'));
  const option = {
    title: { text: '课程签到率' },
    tooltip: {},
    legend: {
      data:['签到率']
    },
    xAxis: {
      data: chartData.categories
    },
    yAxis: {},
    series: [{
      name: '签到率',
      type: 'bar',
      data: chartData.data,
    }]
  };

  myChart.setOption(option);
};

////////////  进度条  //////////////////

// 计算课程进度的计算属性
const courseProgress = computed(() => {
  return tableCourse.value.map(course => {
    const progress = (course.count / course.chour) * 100;
    return {
      ...course,
      progress: progress.toFixed(2) // 保留两位小数
    };
  });
});

// 根据进度确定进度条的状态类
const determineProgressClass = (progress) => {
  return progress >= 100 ? 'el-progress--success' : progress >= 80 ? 'el-progress--warning' : 'el-progress--exception';
};

// 根据进度确定状态文本
const determineProgressText = (progress) => {
  return progress >= 100 ? '完成' : progress >= 80 ? '接近完成' : '进行中';
};


///////////// 出勤表////////////////////
onMounted(() => {
  getCourse();
  getUnriveStu();
  getnoticeType();
});
// 表格信息显示
const tableCourse = ref([]);
const unRiveStudent = ref([]);

const getAllMsg = () => {
  getCourse();
  getUnriveStu();
};

const getCourse = () => {
  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  let teamid = user.teamid;
  let nid = formNotice.id;
  request({
    url: '/sign2/result2',
    method: 'get',
    params: {
      teamid: teamid,
      nid: nid
    }
  }).then(req => {
    console.log(req);
    console.log(req.data);
    if (200 == req.data.errorCode) {
      tableCourse.value = req.data.data;
      const chartData = prepareChartData(req.data.data);
      drawChart(chartData);
    }
    // 清空表单数据
    Object.assign(formNotice , formNoticeData)
    // 关闭对话框
    dialogSingState.value = false
  });
}
const getUnriveStu = () => {
  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  let teamid = user.teamid;
  let nid = formNotice.id;
  request({
    url: '/sign2/unrive',
    method: 'get',
    params: {
      teamid: teamid,
      nid: nid
    }
  }).then(req => {
    console.log(req);
    console.log(req.data);
    if (200 == req.data.errorCode) {
      unRiveStudent.value = req.data.data;
    }
  });
}
</script>


<style scoped>
/* 分页居中样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px auto; /* 根据需要调整外边距 */
}

/* 面包屑样式 */
.el-breadcrumb {
  font-size: 18px; /* 调整字体大小 */
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
}

.el-table {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 现代字体 */
  color: #333; /* 字体颜色 */
  border-top: 1px solid #e8e8e8; /* 表格顶部边框 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.el-table th,
.el-table td {
  padding: 10px; /* 单元格内边距 */
  border-bottom: 1px solid #e8e8e8; /* 行间边框 */
}

/* 表格美化样式 */
.el-table th {
  text-align: center; /* 表头内容居中 */
  background-color: #eef1f6; /* 调整表头背景色 */
  font-weight: bold; /* 表头字体加粗 */
}

/* 添加自定义的进度条状态类 */
.el-progress--success .el-progress__line {
  background-color: #67c23a;
}

.el-progress--warning .el-progress__line {
  background-color: #e6a23c;
}

.el-progress--exception .el-progress__line {
  background-color: #f56c6c;
}

/* 进度条容器样式 */
.progress-container {
  margin-bottom: 15px; /* 调整外边距以匹配示例 */
  max-width: 600px; /* 设置最大宽度 */
}

/* 进度条文本样式 */
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px; /* 调整上边距 */
}

/* 课程名称和进度值样式 */
.course-name {
  font-weight: bold;
}

.progress-value {
  color: #666;
}



</style>